<!--
 * @Descripttion: 规格值
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors: cxguo
 * @LastEditTime: 2019-12-13 14:11:50
 -->
<template>
  <div>
    <!-- value: {{ value }} -->
    <el-button v-for="(item,index) in data" :key="index" icon="el-icon-delete" type="default" @click="()=> {btnDelData(item)}">
      {{ item }}
    </el-button>
    <div class="margin-t10">
      <el-input v-model="speceNew" style="width:100px" />
      <el-button type="primary" @click="btnAddData">新增规格值</el-button>
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'

export default {
  name: 'SpecsValue',
  mixins: [oftenuse],
  props: {
    value: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      data: [],
      speceNew: ''
    }
  },
  watch: {
    'data': {
      handler(data) {
        this.$emit('input', data)
      }
    }
  },
  created() {
    this.data = this.value
  },
  methods: {
    btnAddData() {
      const sp = this.speceNew
      if (sp === '' || !sp) {
        return this.$message.error('请输入规格值！')
      }
      if (this.data.indexOf(sp) !== -1) {
        return this.$message.error(`规格【${sp}】已存在！`)
      }
      this.data.push(this.speceNew)
      this.speceNew = ''
    },
    btnDelData(val) {
      const data = this.data
      const index = data.indexOf(val)
      data.splice(index, 1)
    }
  }
}
</script>

<style scoped>
</style>
